<!DOCTYPE html>
<html>
<head>
	<title>父子结点</title>
</head>
<body>
<div>
	<h1>ok</h1>
	<!-- 注释 -->
	<h2>sdf</h2>
	<ul>
		<li>士大夫</li>
		<li>士大夫</li>
		<li>士大夫</li>
		<li>士大夫</li>
	</ul>
</div>

<script type="text/javascript">
	
/* 父节点
	
	1. parentNode 		只会返回一个元素
	2. hasChildNodes 	判断是否有子结点
*/
var h1 = document.getElementsByTagName('h1')[0];
console.log(h1.parentNode.hasChildNodes()); 


/* 子节点

	1. children 				返回所有的子结点
	2. childNodes 				返回所有的子元素，存在兼容性问题
	3. firstChild 				返回第一个子结点
	4. lastChild 				返回最后一个子结点
	5. firstElementChild 		返回第一个子元素, 存在兼容性问题
	6. lastElementChild 		返回最后一个子元素， 存在兼容性问题
*/ 
var div = document.getElementsByTagName('div')[0];
console.log(div.children)				// 返回所有的子元素
console.log(div.childNodes)				// 返回所有的子结点
console.log(div.firstChild)				// 返回第一个子结点
console.log(div.lastChild)				// 返回最后一个子元素
console.log(div.firstElementChild)		// 返回第一个子元素
console.log(div.lastElementChild)		// 返回最后一个子元素

</script>
</body>
</html>